Try: Sticky header and pagination on Patterns page #52663
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
t-hamano
force-pushed
the
enhancement/patterns-sticky-header
branch
from
bbf5c91
to
e520e9e
Compare
t-hamano
added
[Type] Enhancement
|
Size Change: +107 B (0%) Total Size: 1.44 MB
ℹ️ View Unchanged
|
|
I was thinking about putting a similar PR together myself ❤️ How do you feel about making the pagination controls sticky too? |
t-hamano
changed the title
|
Thanks for the advice! I had forgotten about the pagination 😅 Updated PR and fixed pagination. d747056db2b4db5f3e76dc3f4094e025.mp4 |
|
Nice :) For the pagination, do you think we should align the contents with the save button? 
|
Makes sense! I have updated. Note that I had to change the pagination button size from
|
t-hamano
commented
Jul 17, 2023
| border: 1px solid $gray-800; | ||
| border-left: 1px solid $gray-800; |
There was a problem hiding this comment.
I could not get the save button and pagination height to match exactly when there is a 1px border across the entire pattern canvas. Therefore, I applied the border only to the left side.
t-hamano
commented
Jul 17, 2023
Comment on lines
-93
to
-95
| // Small top padding required to avoid cutting off the visible outline | ||
| // when hovering items. | ||
| padding-top: $border-width-focus-fallback; |
There was a problem hiding this comment.
In this PR, the pattern list has enough padding so this small padding should be unnecessary.
Sorry for that distraction, but buttons should all be either 32px or 40px, the save button needs updating (separately). I think we can still line everything up by using the right padding values, or |
I see. In principle, that means it should be a multiple of 8, right? In order to match the current save button height, it was necessary to use math.div, but in 40fa2db, the size of the pagination button was returned to 32px.
|
|
Flaky tests detected in 7600e90. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5599387118
|
|
@t-hamano apologies for the detour here. Since the save area dimensions are 'incorrect' due to the 36px button, we shouldn't align the pagination with that afterall. That's probably a detail to tackle separately – fix the save button height, and adjust the pagination spacing. For now we can probably revert the last couple of commits and go back to the design you had here (#52663 (comment)). Then I think we're good to get more reviews. Apologies again! |
|
Thank you for your detailed explanation. So in this PR, is it okay if we don't force the height to fit the incorrect save button area? |
Yes that's correct. We can do that in a follow-up PR :) |
|
Updated! Currently, the heights are:
Whether the height of the save button changes to 32px or 40px, I think we can adjust the height with padding.
|
glendaviesnz
approved these changes
Jul 19, 2023
92 tasks
aaronrobertshaw
approved these changes
Jul 19, 2023
There was a problem hiding this comment.
I was looking forward to seeing this polish being added to the Patterns page. Nice work @t-hamano ✨
Tests well for me also.
Whether the height of the save button changes to 32px or 40px, I think we can adjust the height with padding.
Is it worth making this tweak now, so until the save button height is updated things align? The misalignment does stick out a little awkwardly.
I think it's probably okay to proceed, if we follow-up quickly to address the alignment in a new PR. Do you have bandwidth to work on that @t-hamano? If not I can probably take a look. |
|
Thank you all for your reviews and feedback!
Yes, I will merge this PR as I will submit a follow-up PR soon. |
15 tasks
41 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes: #52431
What?
This PR sticks the header (pattern category title, pattern category description, search box, and sync statues) on the Patterns page of the Site Editor so that they are not affected by scrolling.
edit: Additionally, I fixed the pagination as well.
Why?
In the Site Editor's left sidebar navigation and template (parts) list pages, the header and title sections are fixed and are not affected by scrolling. Similarly, I believe that fixing the header on the pattern list page will make it easier to filter patterns and switch between synced categories.
I would appreciate your input on whether this change makes sense.
How?
This PR makes no changes to the logic of the component. Just added some wrap elements to achieve Sticky Header and added some styles.
edit: To fix pagination, I also split and moved components.
Screenshots or screencast
Desktop view
desktop.mp4
Mobile view
mobile.mp4